<template>
  <div class="app-container">
    <el-card>
      <TitleLine title="基本信息" />
      <!-- 表单 start -->
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="上级分类">
          <el-select
            v-model="classifyOne"
            placeholder="请选择下拉选择上级分类"
            clearable
            :style="{ width: '25%' }"
            @change="selectClassify"
          >
            <el-option
              v-for="(item, index) in classifyOneOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>

          <el-select
            v-model="classifySencond"
            placeholder="请选择下拉选择上级分类"
            clearable
            :style="{ width: '25%', 'margin-left': '10px' }"
            @change="selectClassify"
          >
            <el-option
              v-for="(item, index) in classifySecondOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="name">
          <el-input
            v-model="formData.name"
            :maxlength="4"
            placeholder="请输入分类名称"
            clearable
            :style="{ width: '20%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="分类图标" prop="icon">
          <UploadImage
            :isShowTip="true"
            :file-type="['jpg', 'png', 'jpeg']"
            file-pixel="60*60"
            :file-size="1"
            v-model="formData.icon"
          />
        </el-form-item>
        <el-form-item label="分类排序" prop="sort">
          <el-input
            v-model.number="formData.sort"
            :maxlength="4"
            placeholder="请输入分类排序"
            clearable
            :style="{ width: '20%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="推荐到首页" prop="isRecommend">
          <el-radio-group v-model="formData.isRecommend" size="medium">
            <el-radio
              v-for="(item, index) in recomIndexOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示平台" prop="platform">
          <el-checkbox-group v-model="formData.platform" size="medium">
            <el-checkbox
              v-for="(item, index) in platformOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <!-- 表单 end -->
    </el-card>

    <!-- 底部操作按钮栏 -->
    <div class="btn-box flex justify-center mt-20">
      <el-button size="medium" @click="cancle">取消</el-button>
      <el-button size="medium" type="primary" @click="confirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'addClassify',
  components: {},
  props: {},
  data() {
    return {
      // 分类列表
      classifyList: [],
      // 选择的一级分类
      classifyOne: '',
      // 选择的二级分类
      classifySencond: '',

      // 表单
      formData: {
        // 	父级分类id
        parentId: '',
        // 分类名称
        name: '',
        // 分类图标
        icon: '',
        // sort
        sort: 99,
        // 是否推荐
        isRecommend: false,
        // 启用平台
        platform: []
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }
        ],
        icon: [
          {
            required: true,
            message: '请输上传分类图片',
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入分类排序',
            trigger: 'blur'
          },
          { type: 'number', message: '排序必须为数字值' },
          { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数', trigger: ['change', 'blur'] }
        ],
        isRecommend: [
          {
            required: true,
            message: '推荐到首页不能为空',
            trigger: 'change'
          }
        ],
        platform: [
          {
            required: true,
            type: 'array',
            message: '请至少选择一个平台',
            trigger: 'change'
          }
        ]
      },
      // 一级分类列表
      classifyOneOptions: [],
      // 二级分类列表
      classifySecondOptions: [],
      recomIndexOptions: [
        {
          label: '推荐',
          value: true
        },
        {
          label: '不推荐',
          value: false
        }
      ],
      platformOptions: [
        {
          label: '好物特工',
          value: '2'
        }
        // {
        //   label: '酒馆长',
        //   value: '4'
        // }
        // {
        //   label: '挖咖',
        //   value: '8'
        // },
        // {
        //   label: '机咖',
        //   value: '16'
        // }
      ]
    }
  },
  computed: {},
  watch: {
    // 监听一级分类选择
    classifyOne(value) {
      if (value) {
        this.classifySencond = ''
        this.classifySecondOptions = []
        this.getClassifyListById(value)
      } else {
        this.classifySencond = ''
        this.classifySecondOptions = []
        this.classifySencond = ''
        this.classifySecondOptions = []
      }
    }
  },
  created() {
    // 查询分类详情
    this.getClassifyInfo()
    // 级联获取分类
    this.getClassifyListById()
  },
  mounted() {},
  methods: {
    // 查询分类详情
    async getClassifyInfo() {
      const id = this.$route.query.id
      if (!id) return

      const { data } = await this.$http.goods.classify.getById({ params: { id } })
      console.log(data)
      if (data.parentId !== '0') {
        this.classifyOne = data.firstId
        this.classifySencond = data.id
        this.getClassifyListById(data.firstId)
      }
      for (let key in this.formData) {
        if (key === 'platform') {
          this.formData[key] = data[key].split(',')
        } else {
          this.formData[key] = data[key]
        }
      }
      this.formData.id = data.id
    },

    // 级联获取分类
    async getClassifyListById(id = 0) {
      const { data } = await this.$http.goods.classify.getByParentId({ params: { parentId: id } })
      if (!id) {
        // 一级
        this.classifyOneOptions = data
      } else {
        // 二级
        this.classifySecondOptions = data
      }
    },

    /**
     * 当前选择分类
     * @param {String} id
     */
    selectClassify(id) {
      this.formData.parentId = id
    },

    // 点击取消
    cancle() {
      this.$router.back()
    },

    // 点击确认
    confirm: _.debounce(function () {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        // 参数整合
        const params = this.$lodash.cloneDeep(this.formData)
        params.platform = params.platform.join(',')
        const api = params.id ? 'edit' : 'save'
        const tip = params.id ? '编辑成功' : '新增成功'
        // 发送请求
        this.$http.goods.classify[api](params)
          .then(res => {
            if (res.status === 200) {
              this.$message.success(tip)
              this.$router.back()
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            console.log('confirm', err)
          })
      })
    }, 400)
  }
}
</script>
